import React, { Component, PureComponent } from 'react'
class Child extends Component {
    shouldComponentUpdate(nextProps) {
        console.log(nextProps)
        return this.props.count !== nextProps.count
    }
    render() {
        console.log('子组件更新了！', this.props)
        return (
            <div>
                <h2>我是子组件</h2>
                <p>{this.props.count}</p>
            </div>
        )
    }
}

class Index extends PureComponent {
    state = {
        // 值类型
        count: 0,
        // 引用类型
        obj: {
            a: 1,
            b: 2
        }
    }
    // 触发时机：更新时
    //  * @param {*} nextProps 最新的props
    //  * @param {*} nextState 最新的状态数据
    // shouldComponentUpdate(nextProps, nextState) {
    //     // return true
    //     if (this.state.count !== nextState.count) {
    //         // 最新值和旧值不相等
    //         return true
    //     } else {
    //         return false
    //     }
    // }
    hAdd = () => {
        this.setState({
            // count: this.state.count + 1
            count: 1
        })
    }
    hObj = () => {
        // 错误的做法：直接修改引用类型的值
        // 原因：PureComponent内部比较=》遇到引用类型=》比较的是引用地址 =》如果引用地址一样=》不会更新
        // this.state.obj.b = 123
        let newObj = { ...this.state.obj, b: 1010 }
        this.setState({
            // obj: this.state.obj
            obj: newObj
        })
    }
    render() {
        console.log('父组件更新了')
        return (
            <div>
                <h1>组件更新机制性能优化</h1>
                <p>{this.state.count}</p>
                <button onClick={this.hAdd}>ADD</button>
                <hr />
                <h2>{this.state.obj.b}</h2>
                <button onClick={this.hObj}>改变引用类型的值</button>
                <hr />
                <Child count={this.state.count} />
            </div>
        )
    }
}
export default Index